<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 通知</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`公告(${gg.length})`" name="first">
                    <el-table :data="gg" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{"【系统公告】"+scope.row.noticeTitle}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button type="default" @click="query(scope.row.noticeId)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="`通知(${tz.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="tz" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{"【系统消息】"+scope.row.noticeTitle}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="default" @click="query(scope.row.noticeId)">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 弹出框 -->
        <el-dialog :title="title" :visible.sync="open" width="80%">
            <div v-html="content"></div>
        </el-dialog>
    </div>
</template>

<script>
    import {noticeType, noticeById} from "../../api/notice";

    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                showHeader: false,
                tz: undefined,
                gg: undefined,
                title: '',
                open: false,
                content: ""
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                noticeType().then(res => {
                    this.tz = res.data.tz;
                    this.gg = res.data.gg;
                })
            },
            query(index) {
                noticeById(index).then(res => {
                    this.content = res.data.content;
                    if (this.content == null || this.content == "") {
                        this.$message.success('该通知无内容');
                    } else {
                        this.open = true;
                    }
                })
            }
        }
    }

</script>

<style>
    .message-title {
        cursor: pointer;
    }

    .handle-row {
        margin-top: 30px;
    }
</style>

